<template>
	<view class="y-flex" @tap="handleTap">
		<find-image v-if="item.cover" class="y-flex-1" lazy-load :style="{
			'height': pixelunit(cellImageHeight)
		}" :border-radius="cellImageBorderRadius" :src="item.cover" mode="aspectFill" :tip-size="cellImageTipSize"></find-image>
		<empty-image v-else class="y-flex-1" :style="{
			'height': pixelunit(cellImageHeight)
		}" :border-radius="cellImageBorderRadius" :size="cellImageTipSize"></empty-image>
		<view class="position-absolute bottom-0 left-0 right-0 bg-dark-mask y-flex y-row y-align-center pt-20 pb-20 pl-20 pr-20"
		:style="{
			'border-bottom-left-radius': pixelunit(cellImageBorderRadius),
			'border-bottom-right-radius': pixelunit(cellImageBorderRadius)
		}"
		v-if="item.title">
			<com-text class="y-flex-1" :lines="cellTitleLines" :value="item.title" color="#fff"></com-text>
		</view>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import EmptyImage from '../EmptyImage.vue'
	import FindImage from '../Image.vue'
	export default {
		inject: ['navigate'],
		components: {
			EmptyImage,
			FindImage
		},
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			cellImageHeight () {
				return this.options.cellImageHeight || 240
			},
			cellImageBorderRadius () {
				return this.options.cellImageBorderRadius || 10
			},
			cellImageTipSize () {
				return this.options.cellImageTipSize || 20
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			pixelunit () {
				return pixelunit
			}
		},
		methods: {
			handleTap (e) {
				if ( this.item.url ) this.navigate(this.item.url)
				else this.$emit('click', e)
			}
		}
	}
</script>

<style>
</style>